<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Angular的include指令</title>
		<style>
			body{
			  font-family: 'microsoft yahei',Arial,sans-serif;
			}
			
			h1{
			  font-weight:500;
			  font-size:24px;
			}
			
			table, th , td {
			   border: 1px solid grey;
			   border-collapse: collapse;
			   padding: 10px;
			}
			
			table tr:nth-child(odd) {
			   background-color: #E4E4E4;
			}
			
			table tr:nth-child(even) {
			   background-color: #ffffff;
			}
		</style>
	</head>

	<body>
		<h1>成绩单</h1>

		<div ng-app="" ng-controller="studentController">
		
		  <!-- 使用angularjs的include指令导入一个外部html -->
		  <div ng-include="'11angular_include_table.html'"></div>  
		
		</div>

		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular.min.js"></script>
		<script>
			//控制器代码
			function studentController($scope) {
			   $scope.student = {
			      firstName: "Terry",
			      lastName: "Lee",
			      fees:500,
			      subjects:[
			         {name:'编程语言基础',marks:90},
			         {name:'C语言',marks:85},
			         {name:'HTML/CSS',marks:61},
					 {name:'Java',marks:85},
					 {name:'NodeJS',marks:65}
			      ],
			      fullName: function() {
			         var studentObject;
			         studentObject = $scope.student;
			         return studentObject.firstName + " " + studentObject.lastName;
			      }
			   };
			}
		</script>
	</body>

</html>